<template>
<div>
    <span style="position:relative">
        <input ref="input" class="my-input" :value="value" @input="inputEvent" />
        <span class="delete-icon" v-show="value !==''" @click="closeEvent">
           x
        </span>
    </span>
</div>
    
</template>
<script>
export default {
    name:"MyInput",
    props:{
        value:String,
        clearable:Boolean
    },
    data(){
        return {}
    },
    methods:{
        inputEvent(event){
            this.$emit("input",event.target.value)
        },
        closeEvent(){
            this.$emit("input",'');
            this.$refs.input.focus()
        }
    },
   
};
</script>
<style scoped>
.my-input{
    width: 200px;
    height: 40px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 14px;
}
.my-input:focus{
    border:1px solid #409eff;
}
.delete-icon{
    position: absolute;
    right: 10px;
    color: #999;
    cursor: pointer;
    top: 50%;
    margin-top: -10.5px;
}
.delete-icon:hover{
    color: #333;
}
</style>